<script setup lang="ts">
import { useRoute } from "vue-router";
import { addReplyAPI, getDiscussionByIDAPI } from "../api/discussion.ts";
import { ref } from "vue-demi";
import { Discussion, RequestReply } from "../index";
import ReplyList from "../components/discussion/ReplyList.vue";
import useUserStore from "../store/userStore.ts";
// import { ElMessage } from "element-plus";

const route = useRoute();
const id = route.params.id;
const userStore = useUserStore();

const discussion = ref<Discussion | null>(null);
const isLoading = ref(true);
const formData = ref({
  content: "",
});

const reply = ref();

const getData = () => {
  isLoading.value = true;
  getDiscussionByIDAPI(id as unknown as number)
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      discussion.value = result.data;
      publishTime.value = new Date(discussion.value?.publishTime as Date);
      isLoading.value = false;
    })
    .catch(() => {
      isLoading.value = false;
    });
};
getData();
const publishTime = ref<Date>();
/**
 * 发表次级回复
 * @param data 要发送的数据
 */
const addSubReply = (data: RequestReply) => {
  console.log(data);
  addReplyAPI(data)
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      const item = result.data;
      if (item !== null) {
        getData();
      }
    });
};

/**
 * 发表回复
 */
const addReply = () => {
  addReplyAPI({
    content: formData.value.content,
    publisherUserID: 5,
    belongDiscussionID: discussion.value?.id as number,
    publisherName: userStore.userName,
    belongReplyID: 0,
    isRoot: 1,
  })
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      const item = result.data;
      if (item !== null) {
        getData();
        formData.value.content = "";
      }
    });
};
</script>

<template>
  <div class="max-w-4xl mx-auto my-5 bg-white p-3 rounded shadow-lg">
    <div v-loading="isLoading" class="mb-9 bg-gray-300 p-3 float-none">
      <div>
        <div class="text-3xl">{{ discussion?.title }}</div>
        <div class="py-2">{{ discussion?.content }}</div>
      </div>
      <div class="flex">
        <div class="flex-grow"></div>
        <div
          class="mr-4 hover:text-blue-800 hover:cursor-pointer"
          @click="
            () => {
              reply.scrollIntoView(true);
            }
          "
        >
          点击回复
        </div>
        <div>
          <span class="text-green-700">{{ discussion?.publishUser }}</span>
          发表于
          <span class="opacity-30"
            >{{ publishTime?.getFullYear() }}/{{ publishTime?.getMonth() }}/{{
              publishTime?.getDay()
            }}</span
          >
        </div>
      </div>
    </div>
    <div class="p-2" style="background-color: #84638e; color: white">
      共{{ discussion?.replies?.length }}条回复
    </div>
    <ReplyList
      v-if="discussion?.replies?.length && discussion?.replies?.length > 0"
      :replies="discussion?.replies"
      @submitSubReply="addSubReply"
      class="bg-white"
    />
    <div class="mt-7" ref="reply">
      <el-form>
        <el-form-item>
          <el-input type="textarea" v-model="formData.content" />
        </el-form-item>
        <el-button type="primary" @click="addReply">回复</el-button>
      </el-form>
    </div>
  </div>
</template>

<style scoped></style>
